<template>
  <div class="page-list-live">
    <PageList>
      <template #header>视频监控设备管理</template>
      <template #filter>
        <ListFilter :form="topFilter" :key-list="keyList" @search="handleSearch" @reset="handleReset"></ListFilter>
      </template>
      <template #tips>
        <el-button icon="el-icon-document-add" type="primary" @click="handleAdd">新建设备</el-button>
      </template>
      <template #table>
        <ListTable ref="RefListTable" :loading="tableLoading" :table-data="tableData" :table-col="tableCol">
          <template slot="col1" slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              :loading="scope.row.loadingEdit"
              size="mini"
              style="margin-left: 0px; margin-right: 10px;"
              type="text"
              @click="handleRowEdit(scope.row)"
            >编辑</el-button>
            <el-button
              :loading="scope.row.loadingDel"
              size="mini"
              type="text"
              icon="el-icon-delete"
              style="color: red; margin-left: 0px; margin-right: 10px;"
              @click="handleRowDel(scope.row)"
            >删除</el-button>
          </template>
        </ListTable>
      </template>
    </PageList>
    <VideoDialog ref="VideoDialog" @videoPlayHandler="videoPlayHandler" @success="afterEditSuccess"></VideoDialog>
    <VideoPlay ref="VideoPlay"></VideoPlay>
  </div>
</template>

<script>
  import listMixin from '@/mixins/list'
  import VideoDialog from './component/VideoDialog.vue'
  import VideoPlay from './component/VideoPlay.vue'
  import ListFilter from '@/components/ListFilter'
  import { videoInterface, area } from '@/api/api'
  export default {
    components: {
      VideoDialog,
      ListFilter,
      VideoPlay
    },
    mixins: [listMixin],
    data() {
      return {
        topFilter: {
          // keyword: { label: '关键字', placeholder: '请输入设备名称或所在区域' },
          // 'area.name': { label: '关键字', placeholder: '请选择区域', arr },
        },
        keyList: ['name'],
        areaList: [],
        tableData: [],
        tableCol: [
          { type: 'index', label: '序号', width: '60px' },
          { prop: 'name', label: '设备名称' },
          {
            prop: 'areaId', label: '所在区域',
            formatter(row, col, cell) {
              return row.area.name || ''
            }
          },
          { prop: 'url', label: '取流地址' },
          { prop: 'status', label: '状态' },
          { label: '操作', custom: 'col1' }
        ]
      }
    },
    mounted() {
      this.threeList()
    },
    methods: {
      // 区域
      async areaHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await area('post', obj, false)
          if (res.code === 200) {
            // this.areaList = [{
            //   label: '空',
            //   value: '空'
            // }]
            this.areaList = []
            res.data.items.forEach(item => {
              this.areaList.push({
                label: item.name,
                value: item.id,
                isForGate: item.isForGate
              })
            })
          }
        } catch (err) {
          let er = err
        }
      },
      // 查询部门，区域，工种
      async threeList() {
        await this.areaHandler()
        this.$nextTick(() => {
          this.topFilter = {
            'area.id': { label: '区域', placeholder: '请选择区域', type: 'select', arr: this.areaList },
            keyword: { label: '关键字', placeholder: '请输入设备名称或所在区域' }
          }
        })
      },
      videoPlayHandler(url) {
        this.$refs.VideoPlay.open(url)
      },
      // 请求列表数据
      async getList(query) {
        this.tableLoading = true
        try {
          let obj = query || { pageIndex: 1, pageSize: 10, orderBy: 'createdTime', orderByAscent: false }
          const { data: { items: resData, count, pageIndex } } = await videoInterface('post', obj, false)
          this.tableData = []
          this.tableData = resData.map(item => {
            item.loadingEdit = false
            item.loadingDel = false
            return item
          })
          this.$nextTick(() => {
            this.$refs['RefListTable'].update({ page: pageIndex, count })
            this.tableLoading = false
          })
        } catch (err) {
          this.tableLoading = false
          this.tableData = []
        }
      },
      async afterEditSuccess() {
        this.getList(this.serchObj)
      },
      handleAdd() {
        let objData = {
          // 进入哪一个程序
          status: 'add',
          apiKey: {
            add: '/Video', // 添加
          }
        }
        this.$refs['VideoDialog'].openOne(objData)
        this.$refs['VideoDialog'].getList()
        this.$refs['VideoDialog'].getTunnelData()
        this.$refs['VideoDialog'].getIcon()
        this.$refs['VideoDialog'].getEquipment()
      },
      handleRowEdit(row) {
        this.$refs['VideoDialog'].getList()
        this.$refs['VideoDialog'].getTunnelData()
        this.$refs['VideoDialog'].getIcon()
        this.$refs['VideoDialog'].getEquipment()
        let objData = {
          // 进入哪一个程序
          status: 'edit',
          // 源数据
          row: row,
          // 源id
          id: row.id,
          // 查询参数
          searchData: {
            url: '/Video/' + row.id,
            method: 'GET',
            params: null
          }
        }
        this.$refs['VideoDialog'].openOne(objData)
      },
      async delRowReq(row) {
        try {
          let obj = { id: row.id, value: null }
          await videoInterface('delete', obj, true)
          row.loadingDel = false
          this.getList(this.serchObj)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        } catch (err) {
          row.loadingDel = false
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        }
      },
      handleRowDel(row) {
        row.loadingDel = true
        this.$_delConfirm(
          '视频监控设备',
          () => {
            this.delRowReq(row)
          },
          () => {
            row.loadingDel = false
          }
        )
      }
    }
  }
</script>

<style lang="scss" scoped></style>
